<!DOCTYPE html>
<!--
Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
<head>
  <title>goog.ui.CharPicker</title>
  <meta charset=utf-8>
  <!-- common css used by all closure demos; not required for char picker -->
  <link type="text/css" rel="stylesheet" href="css/demo.css">

  <!-- used only for button in this page; not required for char picker-->
  <link type="text/css" rel="stylesheet" href="css/menubutton.css">

  <!-- only required css for char picker -->
  <link type="text/css" rel="stylesheet" href="css/charpicker.css">

  <script src="../base.js"></script>
  <script src="../deps.js"></script>
  <script>
    /* required includes for char picker */
    goog.require('goog.ui.CharPicker');

    /* includes only for this demo */
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.Logger');
    goog.require('goog.debug.LogManager');
  </script>

  <style type="text/css">
    body {
      background-color: #ffe;
    }

    #p1_value {
      color: red;
      font-weight: bold;
      font-size: large;
    }

    p {
      height: 2em;
    }
  </style>
</head>

<body>
<h2>Demo of <strong>goog.ui.CharPicker</strong>:</h2>
<p>You have selected: <span id="p1_value">none</span>
<div id="char-picker"></div>

<script>

  var picker = new goog.ui.CharPicker(["\uD869\uDED6", "a", "b", "c"], 10, 1);
  var el = goog.dom.getElement('char-picker');
  picker.decorate(el);

  // Action on selection
  var selectionAction = function() {
    goog.dom.setTextContent(goog.dom.$('p1_value'),
        picker.getSelectedChar());
  };

  // Get selected locale from the char picker.
  goog.events.listen(picker, 'action', function(e) { selectionAction(); });
</script>
<p>
<input type="button" value="Dispose" onclick="picker.dispose()">
</p>
</body>
</html>
